<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="../common/header.jsp" %>
<div class="easyui-layout" data-options="fit:true">
    <!-- Begin of toolbar -->
    <div id="wu-toolbar">
        <div class="wu-toolbar-button">
            <%@include file="../common/menus.jsp" %>
        </div>
        <div class="wu-toolbar-search">
            <label>酒店名称:</label><input id="search-name" class="wu-text" style="width:100px">
            <a href="#" id="search-btn" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
        </div>
    </div>
    <!-- End of toolbar -->
    <table id="data-datagrid" class="easyui-datagrid" toolbar="#wu-toolbar"></table>
</div>
<!-- 添加弹框 -->
<div id="add-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
     style="width:420px; padding:10px;">
    <form id="add-form" method="post">
        <table>
            <tr>
                <td align="right">酒店名称:</td>
                <td><input type="text" id="add-name" name="name" class="wu-text easyui-validatebox"
                           data-options="required:true, missingMessage:'请填写酒店名称'"/></td>
            </tr>
            <tr>
                <td align="right">酒店经度:</td>
                <td><input type="text" id="add-longitude" name="longitude" class="wu-text easyui-validatebox"
                           data-options="required:true, missingMessage:'请填写酒店经度'"/></td>
            </tr>
            <tr>
                <td align="right">酒店纬度:</td>
                <td><input type="text" id="add-latitude" name="latitude" class="wu-text easyui-validatebox"
                           data-options="required:true, missingMessage:'请填写酒店纬度'"/></td>
            </tr>
            <tr>
                <td align="right">酒店地址:</td>
                <td><input type="text" id="add-address" name="address" class="wu-text easyui-validatebox"
                           data-options="required:true, missingMessage:'请填写酒店地址'"/></td>
            </tr>
            <tr>
                <td align="right">酒店备注:</td>
                <td><textarea id="add-remark" name="remark" rows="6" class="wu-textarea" style="width:260px"></textarea>
                </td>
            </tr>
        </table>
    </form>
</div>
<!-- 修改窗口 -->
<div id="edit-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
     style="width:450px; padding:10px;">
    <form id="edit-form" method="post">
        <input type="hidden" name="id" id="edit-id">
        <table>
            <tr>
                <td align="right">酒店名称:</td>
                <td><input type="text" id="edit-name" name="name" class="wu-text easyui-validatebox"
                           data-options="required:true, missingMessage:'请填写酒店名称'"/></td>
            </tr>
            <tr>
                <td align="right">酒店经度:</td>
                <td><input type="text" id="edit-longitude" name="longitude" class="wu-text easyui-validatebox"
                           data-options="required:true, missingMessage:'请填写酒店经度'"/></td>
            </tr>
            <tr>
                <td align="right">酒店纬度:</td>
                <td><input type="text" id="edit-latitude" name="latitude" class="wu-text easyui-validatebox"
                           data-options="required:true, missingMessage:'请填写酒店纬度'"/></td>
            </tr>
            <tr>
                <td align="right">酒店地址:</td>
                <td><input type="text" id="edit-address" name="address" class="wu-text easyui-validatebox"
                           data-options="required:true, missingMessage:'请填写酒店地址'"/></td>
            </tr>
            <tr>
                <td align="right">酒店备注:</td>
                <td><textarea id="edit-remark" name="remark" rows="6" class="wu-textarea"
                              style="width:260px"></textarea></td>
            </tr>
        </table>
    </form>
</div>
<%@include file="../common/footer.jsp" %>

<!-- End of easyui-dialog -->
<script type="text/javascript">


    /**
     *  添加记录
     */
    function add() {
        var validate = $("#add-form").form("validate");
        if (!validate) {
            $.messager.alert("消息提醒", "请检查你输入的数据!", "warning");
            return;
        }
        if (!checkLong($('#add-longitude').val())) {
            $.messager.alert("消息提醒", "经度整数部分为0-180,小数部分为0到6位!", "warning");
            return;
        }
        if (!checkLat($('#add-latitude').val())) {
            $.messager.alert("消息提醒", "纬度整数部分为0-90,小数部分为0到6位!", "warning");
            return;
        }
        var data = $("#add-form").serialize();
        $.ajax({
            url: 'add',
            dataType: 'json',
            type: 'post',
            data: data,
            success: function (data) {
                if (data.type == 'success') {
                    $.messager.alert('信息提示', '添加成功！', 'info');
                    // $("#add-name").val('');
                    // $("#add-longitude").val('');
                    // $("#add-latitude").val('');
                    // $("#add-address").val('');
                    // $("#add-remark").val('');
                    $('#add-dialog').dialog('close');
                    $('#data-datagrid').datagrid('reload');
                } else {
                    $.messager.alert('信息提示', data.msg, 'warning');
                }
            }
        });
    }

    /**
     * 编辑记录
     */
    function edit() {
        var validate = $("#edit-form").form("validate");
        if (!validate) {
            $.messager.alert("消息提醒", "请检查你输入的数据!", "warning");
            return;
        }
        if (!checkLong($('#edit-longitude').val())) {
            $.messager.alert("消息提醒", "经度整数部分为0-180,小数部分为0到6位!", "warning");
            return;
        }
        if (!checkLat($('#edit-latitude').val())) {
            $.messager.alert("消息提醒", "纬度整数部分为0-90,小数部分为0到6位!", "warning");
            return;
        }
        var data = $("#edit-form").serialize();
        $.ajax({
            url: 'edit',
            dataType: 'json',
            type: 'post',
            data: data,
            success: function (data) {
                if (data.type == 'success') {
                    $.messager.alert('信息提示', '修改成功！', 'info');
                    $('#edit-dialog').dialog('close');
                    $('#data-datagrid').datagrid('reload');
                } else {
                    $.messager.alert('信息提示', data.msg, 'warning');
                }
            }
        });
    }


    /**
     * 删除记录
     */
    function remove() {
        $.messager.confirm('信息提示', '确定要删除该记录？', function (result) {
            if (result) {
                var item = $('#data-datagrid').datagrid('getSelected');
                if (item == null || item.length == 0) {
                    $.messager.alert('信息提示', '请选择要删除的数据！', 'info');
                    return;
                }

                $.ajax({
                    url: 'delete',
                    dataType: 'json',
                    type: 'post',
                    data: {id: item.id},
                    success: function (data) {
                        if (data.type == 'success') {
                            $.messager.alert('信息提示', '删除成功！', 'info');
                            $('#data-datagrid').datagrid('reload');
                        } else {
                            $.messager.alert('信息提示', data.msg, 'warning');
                        }
                    }
                });
            }
        });
    }

    /**
     * Name 打开编辑窗口
     */
    function openEdit() {
        var item = $('#data-datagrid').datagrid('getSelected');
        if (item == null || item.length == 0) {
            $.messager.alert('信息提示', '请选择要编辑的数据！', 'info');
            return;
        }
        $('#edit-dialog').dialog({
            closed: false,
            modal: true,
            title: "编辑酒店信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: edit
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#edit-dialog').dialog('close');
                }
            }],
            onBeforeOpen: function () {
                $('#edit-form').form('clear');

                $("#edit-id").val(item.id);
                $("#edit-name").val(item.name);
                $("#edit-longitude").val(item.longitude);
                $("#edit-latitude").val(item.latitude);
                $("#edit-address").val(item.address);
                $("#edit-remark").val(item.remark);
            }
        });
    }

    /**
     * Name 打开添加窗口
     */
    function openAdd() {
        $('#add-dialog').dialog({
            closed: false,
            modal: true,
            title: "添加酒店信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: add
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#add-dialog').dialog('close');
                }
            }],
            onBeforeOpen: function () {
                //$("#add-form input").val('');
                $('#add-form').form('clear');
            }
        });
    }

    //搜索按钮监听
    $("#search-btn").click(function () {
        var option = {name: $("#search-name").val()};
        $('#data-datagrid').datagrid('reload', option);
    });


    /**
     * 载入数据
     */
    $('#data-datagrid').datagrid({
        url: 'list',
        rownumbers: true,
        singleSelect: true,
        pageSize: 20,
        pagination: true,
        multiSort: true,
        fitColumns: true,
        idField: 'id',
        treeField: 'name',
        fit: true,
        columns: [[
            {field: 'chk', checkbox: true},
            {field: 'name', title: '酒店名称', width: 100, sortable: true},
            {field: 'longitude', title: '酒店经度', width: 100, sortable: true},
            {field: 'latitude', title: '酒店纬度', width: 100, sortable: true},
            {field: 'address', title: '酒店地址', width: 100, sortable: true},
            {field: 'remark', title: '酒店备注', width: 200},
        ]]
    });


    // 校验经度是否符合规范 经度整数部分为0-180,小数部分为0到6位!
    function checkLong(lng) {
        var longrg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
        return longrg.test(lng);
    }

    // 校验纬度是否符合规范 纬度整数部分为0-90,小数部分为0到6位!
    function checkLat(lat) {
        var latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
        return latreg.test(lat);
    }
</script>